<template>
  <div class="student-page">
    <div class="header">
      <h2>成绩查询</h2>
      <el-tag type="success" v-if="studentName">学生：{{ studentName }}</el-tag>
    </div>
    <el-card shadow="never" class="filter-card">
      <el-form :inline="true" :model="query" size="small">
        <el-form-item label="课程名">
          <el-input v-model="query.courseName" placeholder="课程名" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-table :data="list" stripe v-loading="loading" style="width:100%;margin-top:12px;">
      <el-table-column prop="id" label="选课Id" width="80" />
      <el-table-column prop="courseName" label="课程名" />
      <el-table-column prop="teacherName" label="教师" width="120" />
      <el-table-column prop="credit" label="学分" width="80" />
      <el-table-column prop="dailyScore" label="日常成绩" width="100">
        <template slot-scope="s">{{ s.row.dailyScore ?? '-' }}</template>
      </el-table-column>
      <el-table-column prop="examScore" label="考试成绩" width="100">
        <template slot-scope="s">{{ s.row.examScore ?? '-' }}</template>
      </el-table-column>
      <el-table-column prop="score" label="总成绩" width="100">
        <template slot-scope="s">{{ s.row.score ?? '-' }}</template>
      </el-table-column>
    </el-table>
    <div class="pagination-wrapper">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page.sync="page"
        @current-change="fetchData" />
    </div>
  </div>
</template>
<script>
import { getStudentCourseList } from '@/api'
export default { name:'StudentGradesView',
  data() { return {
    studentName:'',
    list:[],
    loading:false,
    page:1,
    pageSize:10,
    total:0,
    query:{ courseName:'' }
  }},
  created(){
    const info = this.$store.state.user.userInfo || JSON.parse(localStorage.getItem('userInfo')||'{}')
    this.studentName = info.username || info.name || ''
    if (this.$store.state.user.userType !== 1) {
      this.$message.warning('当前不是学生身份，已跳转首页')
      this.$router.replace('/home')
      return
    }
    this.fetchData()
  },
  methods:{
    calcPoint(score){
      if (typeof score !== 'number') return '-'
      if (score >= 90) return 4.0
      if (score >= 85) return 3.7
      if (score >= 82) return 3.3
      if (score >= 78) return 3.0
      if (score >= 75) return 2.7
      if (score >= 72) return 2.3
      if (score >= 68) return 2.0
      if (score >= 66) return 1.7
      if (score >= 64) return 1.5
      if (score >= 60) return 1.0
      return 0
    },
    async fetchData(){
      if (!this.studentName) return
      this.loading = true
      try {
        const res = await getStudentCourseList()
        let list = res.data || []
        if (this.query.courseName) list = list.filter(i => (i.courseName||'').includes(this.query.courseName))
        this.total = list.length
        const start = (this.page - 1) * this.pageSize
        this.list = list.slice(start, start + this.pageSize)
      } catch(e){ console.error(e); this.$message.error('加载成绩失败') }
      finally { this.loading=false }
    },
    search(){ this.page=1; this.fetchData() },
    reset(){ this.query={ courseName:'' }; this.search() }
  }
}
</script>
<style scoped>
.student-page { padding:16px; }
.header { display:flex; align-items:center; gap:16px; }
.filter-card { margin-top:8px; }
.pagination-wrapper { margin-top:12px; text-align:right; }
</style>
